<template>
  <div class="login-container">
    <div class="login">
      <div class="login_title">
        <span>Alpha ERP {{languageInfo.title}}</span>
      </div>
      <div class="login_fields">
        <div class="login_fields__language">
          <i class="iconfont icon-zhongwen"></i>
          <el-switch
            v-model="languageFlag"
            inactive-text="简体中文"
            active-text="English"
            inactive-color="#909399"
            active-color="#909399"
          ></el-switch>
          <i class="iconfont icon-yingwen"></i>
        </div>
        <div class="login_fields__user">
          <div class="icon">
            <i id="username" class="el-icon-user"></i>
          </div>
          <input
            class="username"
            type="text"
            maxlength="16"
            autocomplete="off"
            :placeholder="languageInfo.userName"
            v-model.trim="userInfo.userName"
            ref="username"
            @focus="getFocus('username')"
            @blur="loseFocus('username')"
            @keyup.enter="$refs.password.focus();"
          />
          <div class="validation" v-if="checkUserName">
            <i class="el-icon-check"></i>
          </div>
        </div>
        <div class="login_fields__password">
          <div class="icon">
            <i id="password" class="el-icon-lock"></i>
          </div>
          <input
            class="passwordNumder"
            type="password"
            maxlength="16"
            autocomplete="off"
            :placeholder="languageInfo.password"
            v-model="userInfo.password"
            ref="password"
            @focus="getFocus('password')"
            @blur="loseFocus('password')"
            @keyup.enter="pwdEnter"
          />
          <div class="validation" v-if="checkPassWord">
            <i class="el-icon-check"></i>
          </div>
        </div>
        <div class="login_fields__password">
          <div class="icon">
            <i id="validateCode" class="el-icon-key"></i>
          </div>
          <input
            class="validateCode"
            type="text"
            maxlength="4"
            autocomplete="off"
            :placeholder="languageInfo.validateCode"
            v-model="userInfo.captcha"
            ref="captcha"
            @focus="getFocus('validateCode')"
            @blur="loseFocus('validateCode')"
            @keyup.enter="login"
          />
          <div class="codeShow">
            <img :src="codeImg" :title="languageInfo.codeShow" @click="getCaptcha" />
          </div>
        </div>
        <div class="login_fields__submit">
          <el-checkbox
            v-model="rememberMe"
            :style="{'margin-left':checkLeft}"
          >{{languageInfo.rememberMeName}}</el-checkbox>
          <input ref="login" type="button" :value="languageInfo.loginName" @click="login" />
          <div class="shade" v-if="shade">
            登陆中
            <i class="el-icon-loading"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUUID } from '@/utils'
export default {
  name: "login",
  data() {
    return {
      /* 语种信息 */
      languageFlag: false, //false为中文、true为英文
      languageInfo: {
        title: "管理系统", //标题
        userName: "用户名", //提示用户名
        password: "密码", //提示密码
        validateCode: "验证码", //提示验证码
        codeShow: "看不清?点击更换", //提示点击更换验证码
        loginName: "登录", //登录按钮
        rememberMeName: "七天内免登录" //免登录
      },
      /* 用户信息 */
      userInfo: {
        userName: "", //输入的用户名
        password: "", //输入的密码
        captcha: "", //输入的验证码
        uuid: "", //唯一识别码
      },
      rememberMe: true, //免登录
      codeImg: "", //验证码图片路径
      codeShow: "", //生成的验证码
      checkUserName: false, //校验用户名
      checkPassWord: false, //校验密码
      checkLeft: "8px", //免登陆样式控制
      shade: false //遮罩
    };
  },
  watch: {
    /* 监听语种并更换语言 */
    languageFlag(newVal, oldVal) {
      if (newVal) {
        this.languageInfo.title = "Management";
        this.languageInfo.userName = "user name";
        this.languageInfo.password = "password";
        this.languageInfo.validateCode = "validate code";
        this.languageInfo.codeShow = "click on the change";
        this.languageInfo.loginName = "login";
        this.languageInfo.rememberMeName = "No login for seven days";
        this.checkLeft = "0";
      } else {
        this.languageInfo.title = "管理系统";
        this.languageInfo.userName = "用户名";
        this.languageInfo.password = "密码";
        this.languageInfo.validateCode = "验证码";
        this.languageInfo.codeShow = "看不清?点击更换";
        this.languageInfo.loginName = "登录";
        this.languageInfo.rememberMeName = "七天内免登录";
        this.checkLeft = "8px";
      }
    }
  },
  mounted() {
    this.$refs.username.focus(); //进入页面设置用户名获取焦点
    this.getCaptcha(); //获取唯一识别码
  },
  methods: {
    /* 获取焦点 */
    getFocus(name) {
      document.getElementById(name).style.color = "#409EFF";
    },
    /* 失去焦点 */
    loseFocus(name) {
      document.getElementById(name).style.color = "#fff";
      /* 校验格式 */
      if (name === "username") {
        if (this.userInfo.userName.length >= 4) {
          this.checkUserName = true;
        } else {
          this.checkUserName = false;
        }
      } else if (name === "password") {
        if (this.userInfo.password.length >= 6) {
          this.checkPassWord = true;
        } else {
          this.checkPassWord = false;
        }
      }
    },
    /* 密码输入框回车调用 */
    pwdEnter() {
      if (this.userInfo.password.length >= 6) {
        this.checkPassWord = true;
      } else {
        this.checkPassWord = false;
      }
      this.login();
    },
    /* 获取验证码 */
    getCaptcha () {
      this.userInfo.uuid = getUUID();
      this.$http({
        url: `/captcha.jpg?uuid=${this.userInfo.uuid}`,
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 200) {
          this.codeImg = data.url;
        } 
      })
    },
    /* 登陆 */
    login() {
      /* 校验信息 */
      if (!this.checkUserName) {
        this.$message({
          message: "用户名长度为4-16位！",
          type: "warning"
        });
        this.$refs.username.focus();
        return;
      }
      if (!this.checkPassWord) {
        this.$message({
          message: "密码长度为6-16位！",
          type: "warning"
        });
        this.$refs.password.focus();
        return;
      }

      this.shade = true;
      this.$refs.login.setAttribute("disabled", true);
      /* 提交后台校验 */
      this.$http({
        url: "/login",
        method: "post",
        data: this.$http.fmtData(this.userInfo)
      })
        .then(res => {
          if (res.data.code === 200) {
            this.$store.commit("LOGIN", this.userInfo);
            this.$store.commit("SETTOKEN", res.data.token);
            this.$router.push({ name: "index" }); // 登陆成功跳转首页
            location.reload(); // 刷新页面清除浏览器Network信息(后期优化)
          } else {
            this.shade = false;
            this.$refs.login.removeAttribute("disabled");
            this.$message({
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.shade = false;
          this.$refs.login.removeAttribute("disabled");
          this.$message({
            message: "登陆请求超时,请重试！",
            type: "warning"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-image: url("../assets/images/login_image.jpg");
  .login {
    box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
    top: 20px;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.25, 0.265, 0.85);
    -webkit-transition-property: -webkit-transform, opacity, box-shadow, top,
      left;
    transition-property: transform, opacity, box-shadow, top, left;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transform-origin: 161px 100%;
    -ms-transform-origin: 161px 100%;
    transform-origin: 161px 100%;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    position: relative;
    width: 380px;
    height: 480px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    padding: 100px 40px 40px 40px;
    background: #35394a;
    /* Old browsers */
    /* FF3.6+ */
    background: -webkit-gradient(
      linear,
      left bottom,
      right top,
      color-stop(0%, #35394a),
      color-stop(100%, rgb(0, 0, 0))
    );
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(
      230deg,
      rgba(53, 57, 74, 0) 0%,
      rgb(0, 0, 0) 100%
    );
    /* Chrome10+,Safari5.1+ */
    /* Opera 11.10+ */
    /* IE10+ */
    background: linear-gradient(
      230deg,
      rgba(53, 57, 74, 0) 0%,
      rgb(0, 0, 0) 100%
    );
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(53, 57, 74, 0)', endColorstr='rgb(0, 0, 0)',GradientType=1 );
    /* IE6-9 fallback on horizontal gradient */

    .validation {
      position: absolute;
      z-index: 1;
      top: 10px;
      left: 300px;
      opacity: 1;
      color: #fff;
    }
    .disclaimer {
      position: absolute;
      bottom: 20px;
      left: 35px;
      width: 250px;
    }
    .login_title {
      color: #d3d7f7;
      height: 60px;
      text-align: left;
      font-size: 20px;
    }
    .login_fields {
      margin-top: 10px;
      height: 208px;
      position: absolute;
      left: 5px;
      .icon {
        position: absolute;
        z-index: 1;
        left: 36px;
        top: 10px;
        opacity: 0.7;
        color: #fff;
      }
      .login_fields__language {
        padding: 0 35px;
      }
      input[type="text"],
      input[type="password"] {
        color: #61bfff;
        font-size: 16px;
        width: 180px;
        height: 36px;
        text-align: center;
        margin-left: 65px;
        background: rgba(57, 61, 82, 0);
        left: 0;
        border: none;
        border-radius: 5px;
        outline: none;
        font-family: "Gudea", sans-serif;
        box-shadow: none;
        -webkit-transition: background-color 43200s ease-in-out 0s;
        transition: background-color 43200s ease-in-out 0s;
        &:focus {
          border-bottom: 1px solid #61bfff;
        }
      }
    }
    .login_fields__user,
    .login_fields__password {
      margin-top: 15px;
      position: relative;
      .codeShow {
        position: absolute;
        top: 0px;
        left: 250px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        img {
          width: 100px;
          height: 36px;
        }
      }
    }
    /deep/ .el-switch__core:after {
      background-color: #409eff;
    }
    .el-checkbox {
      color: #afb1be;
      margin-bottom: 20px;
    }
    .login_fields__submit {
      position: relative;
      top: 17px;
      left: 0;
      width: 80%;
      right: 0;
      margin: auto;
      .forgot {
        float: right;
        font-size: 10px;
        margin-top: 11px;
        text-decoration: underline;
        a {
          color: #606479;
        }
      }
      input {
        margin-left: 5px;
        border-radius: 50px;
        background: transparent;
        padding: 10px 50px;
        border: 2px solid #4fa1d9;
        color: #4fa1d9;
        text-transform: uppercase;
        font-size: 16px;
        -webkit-transition-property: background, color;
        transition-property: background, color;
        -webkit-transition-duration: 0.2s;
        transition-duration: 0.2s;
        &:focus {
          box-shadow: none;
          outline: none;
        }
        &:hover {
          color: white;
          background: #4fa1d9;
          cursor: pointer;
          -webkit-transition-property: background, color;
          transition-property: background, color;
          -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
        }
      }
    }
    .shade {
      position: absolute;
      top: 38px;
      left: 168px;
      width: 100px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      font-size: 18px;
      color: #fff;
    }
  }
}
</style>